<template>
<div>
    <el-button type="primary" @click="returnsupplier">返回</el-button>
       
    <el-button type="primary" @click="addsuppliergoods">添加</el-button>
    <el-table :data="suppliergoods">
              <el-table-column property="nickname" label="名称"></el-table-column>
              <el-table-column property="category" label="类别"></el-table-column>
              <el-table-column property="material" label="材质"></el-table-column>
              <el-table-column property="specifications" label="适用犬类型"></el-table-column>
              <el-table-column property="exclusive" label="专用"></el-table-column>
              <el-table-column property="packaging" label="包装规格"></el-table-column>
              <el-table-column property="taste" label="商品口味"></el-table-column>
              <el-table-column property="origin" label="产地"></el-table-column>
              <el-table-column property="price" label="价格"></el-table-column>
              <el-table-column  label="操作">
                 <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="修改" placement="top">
                    <el-button type="primary" icon="el-icon-edit" 
                   size="mini" @click="uploadsuppliergoods(scope.row._id)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                  <el-button type="danger" icon="el-icon-delete" 
                   size="mini" @click="deletesuppliergoods(scope.row._id)"  ></el-button>
                   </el-tooltip>
                  </template>    
              </el-table-column>
    </el-table>

     <!-- 分页 -->
   <el-pagination
           background
           layout="prev, pager, next"
           :total="total"
           :page-size="condition.limit"
           :current-page="condition.page"
           @current-change="currentPage"
           >
    </el-pagination>  
</div>
</template>

<script>
export default {
 
  async created() {
    this.$store.dispatch(
      "suppliergoods/agetSuppliergoods",
      this.$route.params.id
    );
  },
  computed: {
    suppliergoods() {
      //得到当前供应商货品
      return this.$store.state.suppliergoods.data;
    },
    total() {
      //总条数
      return this.$store.state.suppliergoods.total;
    },
    condition() {
      //分页条件
      return this.$store.state.suppliergoods.condition;
    }
  },
  methods: {
    // 当前页码
    currentPage(newPages) {
      this.$store.commit("suppliergoods/setCondition", {
        page: newPages
      });
      this.$store.dispatch(
        "suppliergoods/agetSuppliergoods",
        this.$route.params.id
      );
    },
    addsuppliergoods() {
      const id = this.$route.params.id;
      this.$router.push({
        name: "添加货品",
        params: {
          id
        }
      });
    },
    deletesuppliergoods(id) {
      this.$store.dispatch("suppliergoods/deleteSuppliergoods", id);
    },
    returnsupplier() {
      //返回
      this.$router.push({
        name: "supplier"
      });
    },
    uploadsuppliergoods(id) {
      this.$router.push({
        name: "修改货品",
        query: {
          id
        },
        params: {
          sid: this.$route.params.id
        }
      });
    }
    }
};
</script>


<style scoped>
.input {
  width: 300px;
}
</style>
